<template>
<div class="Index" v-if="isInit">
  <div style="text-align: center; font-size: 50px; padding:100px 0;">欢迎使用灵点空间后台管理系统</div>
  <el-row :gutter="10">
    <!-- <el-col :xs="24" :sm="24" :md="16">
      <el-row :gutter="10"> -->
        <!-- <el-col :span="4" v-for="(item, index) in bizData" :key="index"><chart-text-item :data="item"></chart-text-item></el-col>
        <el-col :span="4"  v-for="(item, index) in personData" :key="index + 4"><chart-text-item :data="item"></chart-text-item></el-col> -->
      <!-- </el-row>
    </el-col> -->
    <!-- <el-col :xs="24" :sm="24" :md="8">
      <el-row :gutter="10">
        <el-col :sm="12" :md="24" v-for="(item, index) in personData" :key="index + 4"><chart-text-item :data="item"></chart-text-item></el-col>
      </el-row>
    </el-col> -->
  </el-row>
  <!-- <el-row>
    <el-col :span="24" class="chart-line-row">
      <el-button-group>
        <el-button :type="mallAmount ? 'primary' : ''" size="mini" @click="mallAmount=true">商城</el-button>
        <el-button :type="mallAmount ? '' : 'primary'" size="mini" @click="mallAmount=false">认领</el-button>
      </el-button-group>
      <chart-line-item :data="lineData[0]" :class="{'hidden': !mallAmount}"></chart-line-item>
      <chart-line-item :data="lineData[1]" :class="{'hidden': mallAmount}"></chart-line-item>
    </el-col>
    <el-col :span="24" class="chart-line-row">
      <el-button-group>
        <el-button :type="mallQuantity ? 'primary' : ''" size="mini" @click="mallQuantity=true">商城</el-button>
        <el-button :type="mallQuantity ? '' : 'primary'" size="mini" @click="mallQuantity=false">认领</el-button>
      </el-button-group>
      <chart-line-item :data="lineData[2]" :class="{'hidden': !mallQuantity}"></chart-line-item>
      <chart-line-item :data="lineData[3]" :class="{'hidden': mallQuantity}"></chart-line-item>
    </el-col>
    <el-col :span="24" class="chart-line-row">
      <chart-line-item :data="lineData[4]"></chart-line-item>
    </el-col>
  </el-row> -->
</div>
</template>

<script>
import ChartTextItem from "@/components/Chart/ChartTextItem";
import ChartLineItem from "@/components/Chart/ChartLineItem";
export default {
  name: "Index",
  inject: ['addEventOnResize'],
  components: {ChartLineItem, ChartTextItem},
  provide(){
    return{
      initChart: (function($el, options){
        let tmpOption = JSON.parse(JSON.stringify(options));
        this.setOptionFontSize(tmpOption);
        let chart = this.$echarts.init($el);
        chart.setOption(tmpOption);
        this.charts.push({
          chart, options
        });
        return chart;
      }).bind(this),
    }
  },
  mounted(){
    // this.init();
    this.addEventOnResize(e => {
      this.charts.map(({chart, options}) => {
        let tmpOption = JSON.parse(JSON.stringify(options));
        this.setOptionFontSize(tmpOption);
        chart.setOption(tmpOption);
        chart.resize();
      });
    });
  },
  computed:{
    isInit(){
      return true
      // return this.isInit1 && this.isInit2 && this.isInit3
    }
  },
  data(){
    return{
      isInit1: false,isInit2: false,isInit3: false,
      mallQuantity: true, mallAmount: true,
      charts: [],
      bizData:[
        {
          title: '成交订单（笔）',
          num: 0,
          yesterdayNum: 0,
          totalLabel: '成交订单总量（笔）',
          totalNum: 0
        },
        {
          title: '销售金额（元）',
          num: 0,
          yesterdayNum: 0,
          totalLabel: '销售总额（元）',
          totalNum: 0
        },
        {
          title: '商店成交订单（笔）',
          num: 0,
          yesterdayNum: 0,
          totalLabel: '商店成交订单总量（笔）',
          totalNum: 0
        },
        {
          title: '商店销售金额（元）',
          num: 0,
          yesterdayNum: 0,
          totalLabel: '商店销售总额（元）',
          totalNum: 0
        }
      ],
      personData:[
        {
          title: '新增会员（人）',
          num: 0,
          yesterdayNum: 0,
          totalLabel: '会员总数（人）',
          totalNum: 0
        },
        {
          title: '用户访问量（人）',
          num: 0,
          yesterdayNum: 0,
          totalLabel: '总用户访问量（人）',
          totalNum: 0
        }
      ],
      lineData:[{
        title: '近15日销售金额（元）',
        value: [],
        formatter: '{b0}<br />{c0}元'
      },{
        title: '近15日销售金额（元）',
        value: [],
        formatter: '{b0}<br />{c0}元'
      },{
        title: '近15日订单数（笔）',
        value: [],
        formatter: '{b0}<br />{c0}笔'
      },{
        title: '近15日订单数（笔）',
        value: [],
        formatter: '{b0}<br />{c0}笔'
      },{
        title: '近15日用户访问量UV（人）',
        value: [],
        formatter: '{b0}<br />{c0}人'
      }]
    }
  },
  methods:{
    init(){
      this.$yAxios({
        url: this.$api.common.mallStatisticsInfo,
        loading: true
      }, info => {
        let orderQuantity = this.bizData[2];
        orderQuantity.num = info.orderQuantity.today;
        orderQuantity.yesterdayNum = info.orderQuantity.yesterday;
        orderQuantity.totalNum = info.orderQuantity.total;
        let orderAmount = this.bizData[3];
        orderAmount.num = info.orderAmount.today;
        orderAmount.yesterdayNum = info.orderAmount.yesterday;
        orderAmount.totalNum = info.orderAmount.total;
        let orderAmountList = this.lineData[0];
        orderAmountList.value = info.orderAmountList;
        let orderQuantityList = this.lineData[2];
        orderQuantityList.value = info.orderQuantityList;
        this.isInit1 = true;
      })
      this.$yAxios({
        url: this.$api.common.adoptStatisticsInfo,
        loading: true
      }, info => {
        let orderQuantity = this.bizData[0];
        orderQuantity.num = info.orderQuantity.today;
        orderQuantity.yesterdayNum = info.orderQuantity.yesterday;
        orderQuantity.totalNum = info.orderQuantity.total;
        let orderAmount = this.bizData[1];
        orderAmount.num = info.orderAmount.today;
        orderAmount.yesterdayNum = info.orderAmount.yesterday;
        orderAmount.totalNum = info.orderAmount.total;
        let orderAmountList = this.lineData[1];
        orderAmountList.value = info.orderAmountList;
        let orderQuantityList = this.lineData[3];
        orderQuantityList.value = info.orderQuantityList;
        this.isInit2 = true;
      })
      this.$yAxios({
        url: this.$api.common.userStatisticsInfo,
        loading: true
      }, info => {
        let accessQuantity = this.personData[1];
        accessQuantity.num = info.accessQuantity.today;
        accessQuantity.yesterdayNum = info.accessQuantity.yesterday;
        accessQuantity.totalNum = info.accessQuantity.total;
        let userQuantity = this.personData[0];
        userQuantity.num = info.userQuantity.today;
        userQuantity.yesterdayNum = info.userQuantity.yesterday;
        userQuantity.totalNum = info.userQuantity.total;
        const accessQuantityList = this.lineData[4];
        accessQuantityList.value = info.accessQuantityList;
        this.isInit3 = true;
      })
    },
    setOptionFontSize(options = {}){
      let fontBasicSize = 12, percent = document.documentElement.clientWidth / 1920;
      if(!options.textStyle) options.textStyle = {};
      const resetFontSize = (obj, key) => {
        obj[key]['fontSize'] = obj[key]['fontSize'] ? obj[key]['fontSize'] * percent : fontBasicSize * percent;
      };
      resetFontSize(options, 'textStyle');
      ['xAxis', 'yAxis'].map(s => {
        if(options[s]){
          ['axisLabel'].map(s2 => {
            if(!options[s][s2]){
              options[s][s2] = {};
            }
            resetFontSize(options[s], s2);
          });
        }
      });
      return options;
    },
  }
}
</script>

<style scoped lang="less">
.Index{
  .chart-line-row{
    position: relative;
    >.el-button-group{
      position: absolute;
      z-index: 2;
      top: 7px;
      left: 200px;
    }
    .hidden{
      position: absolute;
      opacity: 0;
      z-index: -1;
    }
  }
}
</style>